<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/lib/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="statics/jquery-3.4.1.js"></script>
    <title>登录</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        header {
            /*border: red solid 1px;*/
            height: 80px;
            background-color: #393D49;
            padding-top: 20px;
            padding-left: 42%;
        }
        header p {
            float: right;
            padding-right: 540px;
            font-family: 楷体;
            font-size: 30px;
            color: lightblue;
            padding-top: 3px;
        }
        #main {
            /*border: red solid 1px;*/
            height: 600px;
            background: url("img/main_back.jpg") no-repeat center 0px;
            background-size: 100% 100%;
        }
        #login {
            border: black solid 1px;
            float: right;
            height: 340px;
            width: 420px;
            margin-top: 60px;
            margin-right: 280px;
            border-radius: 5px;
        }
        #font_login {
            padding-top: 10px;
            font-size: 30px;
            padding-left: 170px;
            font-family: 楷体;

        }
        #formpage {
            /*border: orchid solid 1px;*/
            height: 240px;
            padding-left: 20px;
            padding-top: 10px;
        }
        .layui-input {
            margin-left: 0px;
        }
        .input_radio {
            margin-right: 20px;
        }
        table {
            border-spacing: 20px;
        }
        .layui-icon {
            padding-left: 10px;
        }

        #register {
            /*border: red 1px solid;*/
            width: 150px;
            margin-left: 270px;
            margin-top: 10px;
        }

        footer {
            border: black 1px solid;
            height: 42px;
            background-color: #393D49;
            padding-bottom: 20px;
            margin-top: 0px;
        }

        #foot {
            margin-left: 700px;
            /*border: red solid 1px;*/
            height: 25px;
            width: 200px;
            color: lightblue;
            margin-top: 8px;
        }
    </style>
</head>
<body><!--头部-->
<header>
    <img src="img/back1.png" width="40px" height="40px">
    <p>欢迎使用图书管理系统</p>
</header>
<!--中间部分-->
<div id="main">
        <marquee behavior="alternate"  scrollamount="15">
            <font face="隶书"  color="red"  size="5">好的书籍是最贵重的珍宝。</font>
        </marquee><br>
        <marquee direction="right" behavior="alternate" scrollamount="12">
            <font face="楷书"  color="#8a2be2"  size="3">路漫漫其修道远，吾将上下而求索。</font>
        </marquee>
    <div id="login">
        <p id="font_login">登录</p>
        <hr>
        <div id="formpage">
            <form class="layui-form" action="checkLogin" name="formact" method="post"
                  onsubmit="return submitcheck();">
                <div class="layui-form-item">
                    <table width="380px">
                        <tr id="line1" style="height: 50px">
                            <td style="width: 40px">
                                <label class="layui-form-label"><i class="layui-icon"
                                                                   style="font-size: 30px;">&#xe66f;</i></label>
                            </td>
                            <td>
                                <input  value="zhangsan" type="text" name="user" id="user" lay-reqText="请输入账号" onblur="username();"
                                       required lay-verify="required" placeholder="请输入账号" autocomplete="off"
                                       class="layui-input">
                            </td>
                            <td width="50px">
                                <i class="layui-icon" style="font-size: 30px;" id="checkuser"></i>
                            </td>
                        </tr>
                        <tr id="line2" style="height: 50px">
                            <td>
                                <label class="layui-form-label"><i class="layui-icon" style="font-size: 30px;">&#xe673;</i></label>
                            </td>
                            <td>
                                <input type="password"value="1234" name="password" id="pass" lay-reqText="请输入密码"
                                       onblur="checkpass();" required lay-verify="required" placeholder="请输入密码"
                                       autocomplete="off" class="layui-input">
                            </td>
                            <td width="50px">
                                <i class="layui-icon" style="font-size: 30px;" id="checkpass"></i>
                            </td>
                        </tr>
                        <tr id="line3" style="height: 60px">
                            <td>
                                <label class="layui-form-label"><img src="img/identity.png" width="35px" height="35px" ></label>
                            </td>
                            <td colspan="2">
                                <input type="radio" name="identity" value="读者" title="读者" class="input_radio"
                                       onclick="selread();" checked>
                                <input type="radio" name="identity" value="管理员" title="管理员" class="input_radio"
                                       onclick="selman();">
                            </td>
                        </tr>
                        <tr id="line4" style="height: 60px">
                            <td colspan="3" style="text-align: center">
                                <div class="layui-btn-container">
                                    <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo"
                                            style="width: 100px" onclick="checklogin();">登录
                                    </button>
                                    <button type="reset" class="layui-btn  layui-btn-normal" id="reset"
                                            style="width: 100px" onclick="resetbut();">重置
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </div>
        <div id="register">
            <p>没有账号?立即<a href="Register.html" style="color: hotpink" target="_blank">注册</a></p>
        </div>

    </div>
        <marquee scrollamount="12" style="padding-bottom: 10px">
            <font face="楷书"  color="#9acd32"  size="8" >鸟欲高飞先振翅，人求上进先读书。</font>
        </marquee>
</div>


<!--尾部-->
<footer>
    <p id="foot">版本号:1.0.0&nbsp;&nbsp;&nbsp;&nbsp;@author:阿里木·买斯地克</p>
</footer>
</body>
<!--验证单选框 进行相应的操作-->
<!--通过监听提交按钮，判断单选框的选项-->
<script type="text/javascript">
    function checklogin() {
        var radios = document.getElementsByName("identity");
        // alert(radios[1].checked)

        if (radios[1].checked) {
            // $.ajax({
            //     url: "http://localhost:8081/Book/CheckManagerLogin",
            //     data: {"username": username},
            //     success: function (data) { //从后端获取到的值
            //         if (data == "true") {
            //             checkuser.className = "layui-icon layui-icon-face-smile";//添加响应
            //             checkuser.style.color = "green";
            //
            //         } else {
            //             checkuser.className = "layui-icon layui-icon-face-cry";
            //             checkuser.style.color = "red";
            //             //alert("用户名不符，请检查用户名或身份是否正确！");
            //         }
            //     }
            // });


        }
    }
</script>
<!--动态验证用户密码和用户名-->
<script type="text/javascript">
    //检测用户名
    function username() {
        var username = $("#user").val();//获取用户名
        var checkuser = document.getElementById("checkuser");
        //alert(username);
        $.ajax({
            url: "isExistUser",
            data: {"username": username},
            success: function (data) { //从后端获取到的值
                if (data == "true") {
                    checkuser.className = "layui-icon layui-icon-face-smile";//添加响应
                    checkuser.style.color = "green";

                } else {
                    checkuser.className = "layui-icon layui-icon-face-cry";
                    checkuser.style.color = "red";
                    // alert("用户名不符，请检查用户名或身份是否正确！");
                }
            }
        });
    }
    var flag = true;
    //jquery ajax检测密码
    //函数名字与第三方库中的名字冲突 会导致函数无法响应
    function checkpass() {
        var checkpass = document.getElementById("checkpass");
        var password = $("#pass").val();
        var username = $("#user").val();
        $.ajax({
            url: "isExistUserPass",
            data: {"username": username, "password": password},
            success: function (data) {
                if (data == "true") {
                    checkpass.className = "layui-icon layui-icon-face-smile";
                    checkpass.style.color = "green";
                } else {
                    flag = false;
                    checkpass.className = "layui-icon layui-icon-face-cry";
                    checkpass.style.color = "red";
                    // alert("密码不符，请检查密码或身份是否正确！");
                }
            }
        });
    }
    //如果用户名和密码不符 无法提交表单
    function submitcheck() {
        if (flag == false) {
            flag = true;
            // window.location.href='https://chat.openai.com/?model=text-davinci-002-render-sha';
            alert("登录失败，请检查用户名、密码、或身份是否有误！(*^▽^*)");
            return false;
        } else {
            return true;
        }
    }

    //重置时刷新页面
    function resetbut() {
        var checkuser = document.getElementById("checkuser");
        var checkpass = document.getElementById("checkpass");
        checkpass.className = "layui-icon";
        checkuser.className = "layui-icon";
    }
</script>
<script src="layui/layui.js"></script>
<script>
    layui.use('form', function () {
        var form = layui.form;
    });
    form.on('submit(*)', function (data) {
        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        return false;
    });
</script>
</html>